<template>
    <div>
        <div>
            <h1>尺子1</h1>
            <el-form label-width="100px" >
                <el-form-item label="刻度：">
                    <span v-show="showAnswer">{{v1}}</span> <el-button type="primary" @click="() => { showAnswer = !showAnswer}">{{showAnswer ? '隐藏' : '显示'}}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div ref="ruler1">

        </div>
    </div>
</template>
<!--https://www.npmjs.com/package/slide-ruler-->
<script>
    import SlideRuler from 'slide-ruler';


    export default {
        name: "ruler",
        components: {

        },
        data () {
            return {
                v1: 2,
                showAnswer: false,
            }
        },
        mounted () {
            this._renderSlideRuler();
        },
        methods: {
        _renderSlideRuler() {
            return new SlideRuler (
                {
                    el: this.$refs.ruler1,
                    maxValue: 10,
                    minValue: 0,
                    currentValue: this.v1,
                    handleValue: this.handleValue,
                    precision: 1
                }
            );
        },

        handleValue(value) {
            // console.log(value); //SlideRuler return value
            this.v1 = value
        },
        changeValue() {
            this._renderSlideRuler();
        },
    }
    }
</script>

<style scoped>

</style>
